<script lang="ts" setup name="basic-data">
import type { FormRules } from 'element-plus'
import type { FieldValues, PlusColumn } from 'plus-pro-components'

import { type IMemberInfoRes, getMemberInfo, memberDetailUpdate } from '@fl/api/anjutong'
import { ElButton, ElCol, ElDescriptions, ElRow } from 'element-plus'
import { computed, nextTick, toRefs, watch } from 'vue'

import type { ISchema } from './types'

const props = withDefaults(defineProps<{
    columns: PlusColumn[]
    form: FieldValues
    rules?: FormRules
    schema?: ISchema[]
    title?: string
}>(), {
    columns: () => [],
    schema: () => [],
    title: '基础资料',
})

const emits = defineEmits(['confirm'])
const { form, schema, title } = toRefs(props)

const dialogVisible = ref(false)
const formRef = ref()

function handleClose(done: () => void) {
    done()
}

const state = ref<FieldValues>({})

function handleChange(values: FieldValues, prop: PlusColumn) {
    console.log(values, prop, 'change')
}
function handleSubmit(values: FieldValues) {
    console.log(values, 'Submit')
}
function handleSubmitError(err: any) {
    console.log(err, 'err')
}
function handleReset() {
    console.log('handleReset')
}

function doConfirm(): void {
    memberDetailUpdate(state.value).then(async (res: any) => {
        if (res) {
            await ElMessage({
                message: '操作成功',
                type: 'success',
            })
            await nextTick()

            dialogVisible.value = false
            emits('confirm')
        }
        else {
            ElMessage({
                message: '操作失败',
                type: 'error',
            })
        }
    })
}
function doEdit(): void {
    const id = form.value.memberId as number
    getMemberInfo(id).then((res: IMemberInfoRes) => {
        state.value = res
        dialogVisible.value = true
    })
}

// 转译
watch(form, (val: FieldValues) => {
    schema.value.forEach((v: ISchema) => {
        if (v?.options) {
            const target = val[v.key]
            form.value[v.key] = v.options.find((v: any) => v.value === target)?.label
        }
    })
})

const imgSty = computed(() => {
    return {
        'background': `url(${form.value?.headImage}) no-repeat`,
        'background-origin': ' content-box',
        'background-size': '100% 100%',
    }
})
</script>

<template>
    <ElRow class="el-descriptions__title m10">
        {{ title }}
    </ElRow>

    <ElRow>
        <ElCol :span="4">
            <div class="avatar_sty"
                 flex
                 flex-col
                 flex-justify-evenly
                 flex-items-center
            >
                <div class="pic_sty"
                     :style="imgSty"
                />

                <ElButton type="primary"
                          size="small"
                          @click="doEdit"
                >
                    编辑资料
                </ElButton>
            </div>
        </ElCol>

        <ElCol :span="14">
            <ElDescriptions>
                <template v-for="(item, index) in schema"
                          :key="index"
                >
                    <el-descriptions-item :label="item.label">
                        {{ form[item.key] }}
                    </el-descriptions-item>
                </template>
            </ElDescriptions>
        </ElCol>
    </ElRow>

    <el-dialog v-model="dialogVisible"
               title="编辑会员资料"
               width="50%"
               :before-close="handleClose"
    >
        <PlusForm ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :rules="rules"
                  :row-props="{
                      gutter: 20,
                  }"
                  :col-props="{
                      span: 12,
                  }"
                  label-position="top"
                  @change="handleChange"
                  @submit="handleSubmit"
                  @submit-error="handleSubmitError"
                  @reset="handleReset"
        >
            <template #footer>
                <div flex>
                    <ElButton @click="dialogVisible = false">
                        取消
                    </ElButton>

                    <ElButton type="primary"
                              @click="doConfirm"
                    >
                        确定
                    </ElButton>
                </div>
            </template>
        </PlusForm>
    </el-dialog>
</template>

<style lang="scss" scoped>
  .avatar_sty {
    height: 100%;
    padding-right: 30px;

    :deep(img) {
        display: inline-block;
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .pic_sty {
        display: inline-block;
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }
}
</style>
